<template>
    <div class="movieTicket">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        我的电影票
      </div>
      <div class="refresh-wrapper" v-show="isRefresh">
        <refresh></refresh>
      </div>
      <loading v-show="isLoading"></loading>
      <div class="content" ref="content">
        <div class="content-container">
          <div class="empty" v-show="isEmpty">
            <p class="text">您还没有电影票哦</p>
          </div>
          <div class="line-block-item" v-for="item in movieTicketList"  @click="_statusJudgeRedirect(item.status,item.orderId)">
            <div class="left">
              <div class="ball ball-top-right"></div>
              <div class="ball ball-bottom-right"></div>
              <h1 class="name">{{item.filmName}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.ticketNum}}张</h1>
              <p class="time">{{item.playingTimeDesc}}</p>
              <p class="address">{{item.cinemaName}}</p>
            </div>
            <div class="right">
              <div class="pay-wrapper" v-if="item.status===0">
                <div class="count">￥{{item.realPayAmount}}</div>
                <button class="btn-pay" @click="_pay(item)">{{item.statusDesc}}</button>
                <div class="time"><clock :lockSeatTime="item.lockSeatTime" :currentTime="item.currentTime"></clock></div>
              </div>
              <div class="coding-wrapper" v-if="item.status===1">
                <button class="btn-coding" @click="$router.push('/takeTicket')">取票码</button>
              </div>
              <div class="coding-wrapper" v-if="item.status===2">
                <button class="btn-coding">确认中</button>
              </div>
              <div class="icon-wrapper" v-if="item.status===3"></div>
            </div>
          </div>
          <endLine :text="'我是有底线的'" v-show="endFlag&&movieTicketList.length"></endLine>
        </div>
      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import back from '../../../components/back/back'
  import {getStorage,setStorage} from "../../../common/js/localStorage";
  import {Toast} from 'mint-ui'
  import clock from '../../../components/clock/clock'
  import refresh from '../../../components/refresh/refresh'
  import loading from '../../../components/loading/loading'
  import endLine from '../../../components/endLine/endLine'
  import global from '../../../common/js/global'
    export default {
        name: "movieTicket",
        components:{
          'back':back,
          'clock':clock,
          'refresh':refresh,
          'loading':loading,
          'endLine':endLine
        },
        data(){
          return {
            endFlag:false,
            movieTicketList:[],
            showItem:true,
            rows:10,
            isRefresh:false,
            isEmpty:true,
            isLoading:false
          }
        },
        methods:{
          _pay(item){
            setStorage('lockSeatFlowId',item.psdSeatLockFlowId)
            this.$router.push({path:'/choosePreferential'})
          },
          _statusJudgeRedirect(status,orderId){
            if(status===3){
              this.$router.push({path:'/takeTicket',query:{orderId:orderId}})
            }
          },
          _getMovieTicketList(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/member/myFilmTicketList',
                data:{
                  rows:this.rows,
                  offset:0
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  this.isLoading = false
                  let data = res.data.data
                  this.movieTicketList = data.filmTicketList
                  if(data.filmTicketList.length){
                    this.isEmpty = false
                  }
                  this.endFlag = data.endFlag
                }else if(res.data.code===10){
                  this.$router.push('/login')
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
              }

            })
          }
        },
        mounted() {
          this._getMovieTicketList()
        this.$nextTick(()=>{
          if(!this.scroll){
            // return
            let scroll = new BScroll(this.$refs['content'],{
              click:true,
              pullUpLoad:{
                threshold:-50
              },
              pullDownRefresh: {
                threshold: 40,
                stop: 30
              }})
            //下拉回弹刷新停留事件600ms
            scroll.on('pullingDown', () => {
              this.isRefresh = true
              setTimeout(()=>{
                window.history.go(0)
                scroll.finishPullDown();
              },600)
            });
            let _this = this
            scroll.on('pullingUp',()=>{
              if(!_this.endFlag){
                _this.rows+=10;
                _this._getMovieTicketList()
              }
              scroll.refresh()
              scroll.finishPullUp()

            })
          }else {
            this.scroll.refresh();
          }
        })
      },
        watch:{

        }
    }
</script>

<style scoped lang="stylus">
  .movieTicket
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      overflow hidden
      height calc(100% - 42px)
      .content-container
        /*position relative*/
        padding-top 10px
        padding-bottom 10px
        .empty
          position absolute
          left calc(50% - 80px)
          top 80px
          padding-top 160px
          height 20px
          width 160px
          background #2ab27b
          background url('icon_cinema_empty@2x.png')no-repeat center top/124px 124px
          .text
            height 20px
            line-height 20px
            font-size 14px
            color #666666
        .line-block-item
          display flex
          background #171718
          padding 0 10px
          margin-bottom 10px
          .left
            position relative
            flex 1
            text-align left
            color #ACB1BB
            border-right 2px dashed #101011
            padding 11px 0 17px 0
            .ball
              position absolute
              height 11px
              width 11px
              border-radius 5px
              background #101011
              &.ball-top-right
                right -6px
                top -5px
              &.ball-bottom-right
                right -6px
                bottom -5px
            .name
              color #ffffff
              font-size 16px
              line-height 22px
            .time
              font-size 12px
              height 17px
              line-height 17px
              padding-top 6px
            .address
              font-size 12px
              height 17px
              line-height 17px
              padding-top 2px
            .tags
              padding-top 4px
              height 17px
              .tag
                height 13px
                border 1px solid #8B929E
                display inline-block
                font-size 12px
                line-height 13px
                padding 1px 3px
                border-radius 2px
          .right
            flex 0 0 99px
            position relative
            .coding-wrapper
              position relative
              height 100%
              .btn-coding
                position relative
                top calc(50% - 13px)
                width 54px
                height 26px
                border-radius 13px
                border none
                background #EEAC21
                color #161719
                font-size 14px
                outline none
            .icon-wrapper
              width 100%
              height 100%
              background url("icon_isOverdue.svg")no-repeat center /63px 50px
            .pay-wrapper
              height 80px
              position absolute
              width 100%
              top 15px
              .count
                height 22px
                line-height 22px
                font-size 16px
                color #F7C20F
              .btn-pay
                margin-top 7px
                height 26px
                width 54px
                background #EEAC21
                border none
                color #161719
                border-radius 13px
                font-size 14px
                outline none
              .time
                height 17px
                line-height 17px
                font-size 12px
                color #8B929E
                margin 0 auto
                width 48px
                padding-left 18px
                padding-top 4px

</style>
